<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">修改密码</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" router-link :to="{ path: '/main/mine' }" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<div style="width: 90%;margin: 0 auto;">
			<div style="padding-top: 5%;">
				<icon name="warn" scale="2"></icon><span style="margin-left: 3%;">需要您提供当前账号的密码！</span>
			</div>
			<v-form ref="form" v-model="valid" lazy-validation>
				<v-text-field v-model="password_old" :rules="[rules.requiredPassword]" :type="show ? 'text' : 'password'"
					label="原密码" validate-on-blur placeholder=""></v-text-field>
				<v-text-field v-model="password_new_one" :rules="[rules.requiredPassword, rules.counterPassword]" :type="show ? 'text' : 'password'"
					label="新密码" validate-on-blur placeholder=""></v-text-field>
				<v-text-field v-model="password_new_two" :rules="[rules.checkPassword, rules.counterPassword]" :type="show ? 'text' : 'password'"
					label="再次输入" validate-on-blur placeholder=""></v-text-field>
				<div style="padding-top: 3vh;"></div>
				<v-btn block color="#FF5252" :disabled="!valid" class="mr-4" @click="validate" style="font-size: 18px;color:white;">
					确认
				</v-btn>
			</v-form>
		</div>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Password",
		data() {
			return {
				name: '',
				phone: '',
				address_del: '',
				valid: true,
				password_old:'',
				password_new_one:'',
				show: false,
				password_new_two:'',
				rules: {
					requiredPassword: value => !!value || "请输入密码",
					counterPassword: value => value.length >= 6 || "至少输入6位密码",
					checkPassword: value =>
						value === this.password_new_one || "俩次输入密码不一致",
				},
				snackbar:false,
				timeout:1000,
				message:''
			}
		},
		methods: {
			validate() {
				if (this.$refs.form.validate()) {
					let _this = this;
					axios
						.put("/api/v1.0/mine/change_pwd", {
							old_password:_this.password_old,
							new_password:_this.password_new_two,
						})
						.then(function(response) {
							if (response.data.errno == '0') {
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									axios
										.delete("/api/v1.0/login_out")
										.then(function(response){
											if (response.data.errno === '0'){
												// 修改账号后注销登录返回到登录页面
												_this.goLogin()
											}
										})
								}, 1000);
							} else if (response.data.errno == '4101') {
								// 未登跳转到登录页面
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									_this.$router.replace({
										path: "/login"
									});
								}, 1000);
							}
						})
						.catch(function() {
							_this.message = "连接服务器失败！";
						});
				}
			},
			reset() {
				this.$refs.form.reset()
			},
			resetValidation() {
				this.$refs.form.resetValidation()
			}
		}
	}
</script>

<style scoped>
	.top_button {
		width: 80%;
		font-size: 15px;
		background: #FF5252;
		height: 4vh;
		text-align: center;
		color: #FFFFFF;
	}
</style>
